<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>div标签</title>


	<style type="text/css">
	/*css 体验*/
		.box{
			width: 960px;
			height: 500px;
			border: 1px solid red;
			margin: 0 auto;
			text-align: center;
		}
		.box h3{
			color: red;
			font-size: 60px;
			font-weight: bold;
		}
		.time{
			color: gold;
		}
	</style>
</head>
<body>
	<h2>div 作用就是 将具有逻辑关联的一段信息放置在一起，使得在逻辑上来说是一个整体</h2>

	<h3>新闻信息-无div包裹</h3>
		<img src="../day1/imgs/fj22.jpg" width="100" alt="新闻图片" title="新闻图片">
		<p>来源：新华社</p>
		<p>时间：2021年7月7日09:13:14</p>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci et doloremque architecto deleniti, maiores tempora id saepe ipsum vitae perferendis commodi magnam aspernatur illum dolor error vero omnis magni neque minus! Assumenda officia nulla iusto eum voluptates totam quaerat nemo nesciunt possimus, vero quis aut illum consequatur enim voluptate accusamus, doloremque. Voluptate dignissimos optio ipsum modi quae dicta, quam delectus! Perspiciatis, odit, reprehenderit. Maxime commodi vitae, porro corporis beatae reprehenderit facere laborum aliquid culpa inventore eveniet incidunt quia sunt, perspiciatis libero placeat enim natus voluptatum, dolore eos. Optio velit exercitationem, magni qui autem, nostrum ex fuga quam architecto a, repellat.</p>

	<hr>

	<div class="box">
		<!-- div 主要是为了后期css进行布局操作 css 可以给 div 设置宽高（大小）边框... -->
		<h3>新闻信息-使用div包裹</h3>
		<img src="../day1/imgs/fj22.jpg" width="100" alt="新闻图片" title="新闻图片">
		<p>来源：新华社</p>
		<!-- span 和 div 也是一个容器 语义上来说没有 div 这么，小处 布局的修改 -->
		<p>时间：<span class="time">2021年7月7日09:13:14</span></p>
		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci et doloremque architecto deleniti, maiores tempora id saepe ipsum vitae perferendis commodi magnam aspernatur illum dolor error vero omnis magni neque minus! Assumenda officia nulla iusto eum voluptates totam quaerat nemo nesciunt possimus, vero quis aut illum consequatur enim voluptate accusamus, doloremque. Voluptate dignissimos optio ipsum modi quae dicta, quam delectus! Perspiciatis, odit, reprehenderit. Maxime commodi vitae, porro corporis beatae reprehenderit facere laborum aliquid culpa inventore eveniet incidunt quia sunt, perspiciatis libero placeat enim natus voluptatum, dolore eos. Optio velit exercitationem, magni qui autem, nostrum ex fuga quam architecto a, repellat.</p>
	</div>

</body>
</html>